<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h2>利用 text-align: center; 进行水平居中</h2>
  <h1>I am h1</h1>
  <p>I am p</p>
  <span>I am span: Span是行内元素，如果将 text-align: center 直接应用在 span元素上将不会生效</span>

  <div style="text-align: center;">
    <span>I am span in a div with text-align: center : 如果应用在它的父元素上，才会生效</span>
  </div>

  <h1>
    margin: 0 auto; 上下外边距为零，左右自适应。
  </h1>
  <div class="c1">
  </div>

  <h1>浮动元素</h1>
  <h2>原正方形</h2>
  <!-- <div class="float-square">
  </div> -->
  <!-- <h2>添加 position: relative; left: 50%</h2>
  <div class="float-square" style=" position: relative; left: 50%"></div> -->
  <!-- <h2>将元素向左边再偏移一半</h2> -->
  <!-- <div class="float-square" style="  position: relative; left: 50%; margin-left: -100px;"></div> -->
  <h2>也可以用 transform: translateX(-50%) 来动态偏移</h2>
  <div class="float-square" style=" position: relative; left: 50%; transform: translateX(-50%); "></div>

  <h1> 行内元素绝对定位 </h1>
  <span class="ele-span">
    Span Text
  </span>
  <style>
    h1, p, span {
      text-align: center;
    }

    div.c1 {
      height: 200px;
      width: 200px;
      background-color: blanchedalmond;
      margin: 0 auto;
    }

    div.float-square {
      height: 200px;
      width: 200px;
      background-color: chartreuse;
      float: left;
    }

    span.ele-span {
      color: gold;
      position: absolute;
      left: 0;
      right: 0;
      /* 当行内元素绝对定位时，其普通流定位被允许实现 */
      margin: 0 auto;
    }
  </style>
</body>
</html>